<!-- 自定义键盘 -->
<template>
	<uni-card is-full ref="card" padding="0">
		<div class="center" style="padding: 10px 0;">
			<div :style="[{color: '#333', fontSize: '18px', fontWeight: '600'}]">{{title}}</div>
		</div>
		<slot></slot>
		<div style="display: flex;align-items: center;justify-content: center;padding: 10px 0;">
			<div v-for="(num, index) in 6" :key="index" class="center" :style="[{width: '44px', height: '44px', border: '1px solid #999', borderRadius: '4px', margin: '5px'}]">
				<div v-if="password && index < resArr.length" style="width: 10px;height: 10px;border-radius: 5px;background-color: black;"/>
				<div v-else>{{showRes(num, index)}}</div>
			</div>
		</div>
		<Num v-if="type === 'number' || type === 'decimal'" :decimal="type === 'decimal'" :randomType="randomType" @click="onClick"/>
	</uni-card>
</template>

<script>
	
	import base from '@/BaseMixins.js'
	import Num from './num.vue'
	
	const letters = 'abcdefghijklmnopqrstuvwxyz'
	
	export default {
		mixins: [base],
		emits: ['complete'],
		components: {Num},
		props: {
			/**
			 * 键盘类型
			 * number：纯数字0-9键盘。4×3
			 * decimal：纯数字0-9+小数点.键盘。4×3
			 * default: 字母键盘
			 * car：汽车车牌
			 */
			type: {
				type: String,
				default: 'number'
			},
			// 标题
			title: {
				type: String,
				default: '请输入'
			},
			// 是否密码类型
			password: Boolean,
			// 输入长度
			count: {
				type: Number,
				default: 6
			},
			/**
			 * 随机类型
			 * 0：不随机。自然顺序
			 * 1：按正顺序
			 * 2：按倒顺序
			 * 3：初始化随机
			 * 4：每次都随机
			 */
			randomType: {
				type: Number,
				default: 0
			}
		},
		watch: {
			
		},
		data() {
			return {
				// 输入的结果
				resArr: []
			}
		},
		mounted() {
			
		},
		methods: {
			showRes(str, index) {
				if (index < this.resArr.length) {
					if (this.password) {
						return '•'
					}
					return this.resArr[index]
				}
				return ''
			},
			
			/**
			 * 点击了键盘
			 * -1表示删除一个
			 */
			onClick(res) {
				if (res) {
					if (res === -1) {
						// 删除一位
						if (this.resArr.length  > 0)  {
							this.resArr.splice(this.resArr.length - 1, 1)
						}
					} else {
						if (this.resArr.length < this.count) {
							this.resArr.push(res)
							if (this.resArr.length === this.count) {
								// 输入完成
								this.$emit('complete', this.resArr.join(''), (bool) => {
									if (bool) {
										// 成功
									} else {
										// 验证失败
										this.resArr.length = 0
									}
								})
							}
						}
					}
				}
			}
		}
	}
</script>

<style>
	
</style>